<template>
    <div class="payment-result-container">
        <!-- 导航栏组件 -->
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>支付成功</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <!-- 订单 -->
        <div class="order-box">
            <div class="status icon-checked">支付成功</div>
                <div class="buttons">
                    <div class="button navigator" @click="$router.push('/orderList?status=0')">
                        我的订单
                    </div>
                    <div class="button navigator"
                        @click="$router.push('/orderDetail?oid='+$route.query.oid)"
                    >
                    查看订单
                </div>
            </div>
        </div>


    </div>
</template>
  
<script setup>
</script>
  
<style lang="scss">
.payment-result-container {
    .order-box {
        line-height: 1;
        padding: 25px 0;
        color: #fff;
        background-color: #27ba9b;
    
        .status {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
    
        .status::before {
            display: block;
            font-size: 55px;
            margin-bottom: 10px;
        }
    
        .buttons {
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
    
        .button {
            text-align: center;
            margin: 0 5px;
            font-size: 14px;
            color: #fff;
    
            &:first-child {
                width: 100px;
                border-radius: 32px;
                border: 1px solid #fff;
            }
        }
    }
}
</style>